<template>
<TnNavbar fixed> 项目案例 </TnNavbar>
  <view style="margin-top: 10px;display: flex;justify-content: center;align-items: center;">
    <TnSearchBox style="flex: 1;"
    v-model="searchValue"
    @input="searchInputEvent"
    @search="searchBtnClickEvent"
  />
  <view class="menu" @click="onShowPopup">
    <TnIcon name="search-menu" size="26px" color="#fff" />
  </view>
    
</view>

<view class="tuniao-project-list">
    <view
        v-for="(item, index) in tuniaoProjectData"
        :key="index"
        class="list-item tn-shadow"
    >
        <view class="top">
            <view class="list-info">
                <!-- <view class="image">
                    <image class="tn-image" :src="item.image" mode="aspectFill" />
                </view> -->
                <TnTitle :title="item.title" size="lg" mode="dot" assist-color="tn-blue" />
                <!-- <view class="title">{{ item.title }}</view> -->
            </view>
            <!-- <view class="list-operation">
                {{ item.amt }}
            </view> -->
        </view>
        <view class="item-desc">
        <!-- {{ item.desc }} -->
        总造价（万元）: {{ item.amt }}
        </view>
        <view class="item-desc">
        <!-- {{ item.desc }} -->
        编制时间: -
        </view>
        <view class="item-desc">
            <TnTag type="success" shape="round" style="margin-right: 10px;">{{ item.a1 }}</TnTag>
            <TnTag type="success" shape="round" style="margin-right: 10px;">{{ item.a2 }}</TnTag>
            <TnTag type="success" shape="round" >{{ item.a3 }}</TnTag>
        </view>
    </view>
</view>

<TnPopup v-model="showPopup" open-direction="bottom">
    <view class="tn-p-lg"> 
        <TnTitle title="地区" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in regions" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="时间" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in years" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="税价类型" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info" v-for="(item, index) in prices" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>
        <view style="height: 10px;"></view>
        <TnTitle title="查看方式" size="lg" mode="hLine" assist-color="tn-red" />
        <view style="display: flex;flex-wrap: wrap;">
            <TnTag type="info"  v-for="(item, index) in periods" :key="index" style="margin-top: 5px;margin-right: 5px;">{{ item }}</TnTag>
        </view>

        
        
        <view style="height: 20px;"></view>
        <view class="btns">
            <view class="btn1">重置</view>
            <view class="btn2">查询</view>
        </view>
    </view>
  </TnPopup>
</template>

<script lang="ts" setup>
import { ref }from 'vue'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'

const showPopup = ref(false)
const onShowPopup = () => {
    showPopup.value = true
}

const regions = ['所有地市', '广东省', '广州市', '韶关市', '深圳市', '珠海市','汕头市',
'佛山市',
'江门市',
'湛江市',
'茂名市',
'肇庆市',
'惠州市',
'梅州市',
'汕尾市',
'河源市',
'阳江市',
'清远市',
'东莞市',
'中山市',
'潮州市',
'揭阳市',
'云浮市',]

const years = ['2024年',
'2023年',
'2022年',
'2021年',
'2020年',
'2019年',
'2018年',
'2017年',
'2016年',
'2015年',
'2014年',
'2013年',
'2012年',
'2011年',
'2010年',
'2009年',
'2008年',
'2007年',
'2006年',
'2005年',
]


const prices = ['含税价','除税价']
const periods = ['按期数','地市综合价','年度综合价']


const tuniaoProjectData = ref([
    {
      id: '1',
      title: '(部2018概)浙江省高速公路案例130',
    //   image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
    image: 'https://img1.baidu.com/it/u=847554842,700654528&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
      desc: '',
      amt: '137713.9',
      a1: '浙江',
      a2: '高速公路',
      a3: '新建'
    },
    {
      id: '2',
      title: '(部2018清单)山西省四级公路案例56',
      image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
      desc: '',
      amt: '4830.96',
      a1: '山西',
      a2: '四级公路',
      a3: '改建'
    },
    {
      id: '3',
      title: '(部2018清单)新疆维吾尔自治区一般公路二级案例104',
      image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
      desc: '',
      amt: '126612.07',
      a1: '新疆',
      a2: '一般公路二级',
      a3: '新建'
    },
    {
      id: '4',
      title: '(部2018清单)河南省四级公路案例97',
      image: 'https://resource.tuniaokj.com/images/logo/tuniao.jpg',
      desc: '广东省汕尾市市辖区2024年第2月建筑参考价(除税价)',
      amt: '4164.08',
      a1: '河南',
      a2: '四级公路',
      a3: '改建'
    },
    {
      id: '5',
      title: '(部2018概)广西壮族自治区高速公路案例46',
      image: 'https://i.52112.com/icon/jpg/256/20210730/125209/5348991.jpg',
      desc: '广东省珠海市市辖区2022年第4季度水运参考价(除税价)',
      amt: '523870.52',
      a1: '广西',
      a2: '高速公路',
      a3: '新建'
    },
    {
      id: '6',
      title: '(部2018概)广西壮族自治区高速公路案例47',
      image: 'https://i.52112.com/icon/jpg/256/20210730/125209/5348991.jpg',
      desc: '广东省广州市市辖区2022年第4季度水运参考价(除税价)',
      amt: '449880.57',
      a1: '广西',
      a2: '高速公路',
      a3: '新建'
    },
  ])

  const searchValue = ref('')
  const searchInputEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchInputEvent', value)
}
const searchBtnClickEvent = (value: string) => {
  // eslint-disable-next-line no-console
  console.log('searchBtnClickEvent', value)
}
</script>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
